<template>
  <div class="new-eva-personnel-next-container">
    <el-dialog title="新增被评价人员"
               @close="closeAdd"
               :visible.sync="dialogTableVisible"
               width="80%"
               :append-to-body="true">
      <el-row :gutter="20">
        <el-form label-width="80px"
                 :model="addRequestParam">
          <el-col :span="6">
            <el-form-item label="一级机构">
              <el-select v-model="addRequestParam.one_organ"
                         @change="changeOne"
                         placeholder="请选择一级机构">
                <el-option v-for="(option,index) in oneOrganList"
                           :key="index"
                           :value="option.field_value"
                           :label="option.field_value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="二级机构">
              <el-select v-model="addRequestParam.two_organ"
                         @change="changeLevelStruct(addRequestParam.two_organ,'three_organ','two_organ')"
                         placeholder="请选择二级机构">
                <el-option v-for="(option,index) in addOrgan.twoOrganList"
                           :key="index"
                           :value="option.field_value"
                           :label="option.field_value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="三级机构">
              <el-select v-model="addRequestParam.three_organ"
                         @change="changeLevelStruct(addRequestParam.three_organ,'four_organ','three_organ')"
                         placeholder="请选择三级机构">
                <el-option v-for="(option,index) in addOrgan.threeOrganList"
                           :key="index"
                           :value="option.field_value"
                           :label="option.field_value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="四级机构">
              <el-select v-model="addRequestParam.four_organ"
                         @change="changeLevelStruct(addRequestParam.four_organ,'five_organ','four_organ')"
                         placeholder="请选择四级机构">
                <el-option v-for="(option,index) in addOrgan.fourOrganList"
                           :key="index"
                           :value="option.field_value"
                           :label="option.field_value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="五级机构">
              <el-select v-model="addRequestParam.five_organ"
                         @change="changeLevelStruct(addRequestParam.five_organ,'six_organ','five_organ')"
                         placeholder="请选择五级机构">
                <el-option v-for="(option,index) in addOrgan.fiveOrganList"
                           :key="index"
                           :value="option.field_value"
                           :label="option.field_value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="六级机构">
              <el-select v-model="addRequestParam.six_organ"
                         placeholder="请选择六级机构">
                <el-option v-for="(option,index) in addOrgan.sixOrganList"
                           :key="index"
                           :value="option.field_value"
                           :label="option.field_value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="岗位名称">
              <el-select v-model="addRequestParam.job_name"
                         placeholder="请选择">
                <el-option v-for="(option,index) in jobNameList"
                           :key="index"
                           :value="option.field_value"
                           :label="option.field_value"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6"
                  class="flex-end">
            <el-button @click="addsearch"
                       type="primary">查询</el-button>
            <el-button @click="addReset">重置</el-button>
          </el-col>
        </el-form>
      </el-row>
      <el-row>
        <el-col :span="24">
          <el-table :highlight-current-row="true"
                    border
                    ref="multipleTable"
                    :row-key="getRowKeys"
                    @select="changeCheck"
                    @selection-change='handleSelectionChange'
                    :header-cell-style="{ background: '#f5f5f5' }"
                    :data="addEvaluateList.list">
            <el-table-column type="selection"
                             :reserve-selection="true"
                             width="55">
            </el-table-column>
            <el-table-column type="index"
                             label="序号"
                             sortable
                             align="center"
                             width="80"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="person_name"
                             label="姓名"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="联系方式"
                             width="100"
                             prop="phone"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="岗位名称"
                             show-overflow-tooltip
                             prop="job_name"
                             align="center">
            </el-table-column>
            <el-table-column label="管理级别"
                             show-overflow-tooltip
                             prop="manage_level"
                             align="center">
            </el-table-column>
            <el-table-column label="职务级别"
                             show-overflow-tooltip
                             prop="job_level"
                             align="center">
            </el-table-column>
            <el-table-column label="条线"
                             show-overflow-tooltip
                             prop="strip_line"
                             align="center">
            </el-table-column>
            <el-table-column prop="one_organ"
                             label="一级机构"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="two_organ"
                             label="二级机构"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="three_organ"
                             label="三级机构"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="four_organ"
                             label="四级机构"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column prop="five_organ"
                             label="五级机构"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
            <el-table-column label="六级机构"
                             prop="six_organ"
                             align="center"
                             show-overflow-tooltip>
            </el-table-column>
          </el-table>
        </el-col>
        <el-col :span="24"
                class="botttom-box">
          <el-pagination @current-change="handleAddPageChange"
                         @size-change="handleAddSizeChange"
                         :current-page="addRequestParam.page"
                         :page-size="addRequestParam.page_size"
                         layout="total,sizes,prev, pager, next, jumper"
                         background
                         :total="addEvaluateList.total_count"
                         align="center">
          </el-pagination>
        </el-col>
      </el-row>
      <span slot="footer"
            class="dialog-footer">
        <el-button type="primary"
                   @click="saveAddEvaluate">确 定</el-button>
        <el-button @click="cancelEvaluate">取 消</el-button>

      </span>
    </el-dialog>
  </div>
</template>

<script>
import { backEvaluateApi } from '@/services/ProjectCenter'
export default {
  props: {
    topStepParams: {
      type: Object,
      default: () => {
        return {}
      }
    },
    childDialog: {
      type: Boolean,
      default: () => {
        return false
      }
    }
  },
  data () {
    return {
      resetParam: {//重置
        search_word: '',
        job_name: '',
        one_organ: '',
        two_organ: '',
        three_organ: '',
        four_organ: '',
        five_organ: '',
        six_organ: '',
        is_page: 1,
        page: 1,
        page_size: 10,
      },
      startcheckList: {
        field: '',
        p_field_value: '',
        p_field: '',
      },
      //选中的list
      getRowKeys (row) {
        //记录每行的key值
        return row.person_id;
      },
      addEvaluateList: { //新增被评价
        list: [],
        total: 0,
        total_count: 0
      },
      addcheckList: {
        field: '',
        p_field_value: '',
        p_field: '',
      },
      addRequestParam: {
        is_page: 1,//分页
        one_organ: '',
        two_organ: '',
        three_organ: '',
        four_organ: '',
        five_organ: '',
        six_organ: '',
        job_name: '',
      },
      checkIds: [],
      jobNameList: [],
      oneOrganList: [],
      addOrgan: {
        twoOrganList: [],
        threeOrganList: [],
        fourOrganList: [],
        fiveOrganList: [],
        sixOrganList: [],
      },
      dialogTableVisible: false,
      startrequestParam: {
        comp_id: '',
      }
    }
  },
  methods: {
    changeLevelStruct (val, field, pField) {//五级
      let newVal = {
        field: field,
        p_field: pField,
        p_field_value: val
      }
      this.addcheckList = newVal
      this.getelseOrgan()
    },
    addReset () {//重置
      let reset = JSON.parse(JSON.stringify(this.resetParam))
      this.addRequestParam = Object.assign(this.addRequestParam, reset)
      this.addsearch()
      let selArr = {
        twoOrganList: [],
        threeOrganList: [],
        fourOrganList: [],
        fiveOrganList: [],
        sixOrganList: [],
      }
      this.addOrgan = selArr
    },
    changeCheck (selection, row) {
      let selected = selection.length && selection.indexOf(row) !== -1;
      //selected是当前点击的选中态
      //选中的表格取消事件
      if (selected === false) {
        this.$nextTick(() => {
          this.$refs.multipleTable.selection.forEach((ele) => {
            if (ele.person_id == row.person_id) {
              this.$refs.multipleTable.toggleRowSelection(ele, false);
            }
          });
        });
      }
    },
    handleAddSizeChange (val) {
      this.addRrequestParam.page_size = val
      this.addsearch()
    },
    //分页-新增被评价人
    handleAddPageChange (val) {
      this.addRequestParam.page = val
      this.addsearch()
    },
    //选择一级机构
    changeOne (val) {
      let arr = {
        two_organ: '',
        three_organ: '',
        four_organ: '',
        five_organ: '',
        six_organ: '',
      };
      let newVal = {
        field: 'two_organ',
        p_field: 'one_organ',
        p_field_value: val
      };
      this.startcheckList = newVal;
      Object.assign(this.startrequestParam, arr);
      this.addcheckList = newVal;
      Object.assign(this.addRequestParam, arr);
      this.getelseOrgan()
    },
    getLevelData (res) {
      if (this.addcheckList.field === 'two_organ') {
        this.addOrgan.twoOrganList = res.list
      } else if (this.addcheckList.field === 'three_organ') {
        this.addOrgan.threeOrganList = res.list
      } else if (this.addcheckList.field === 'four_organ') {
        this.addOrgan.fourOrganList = res.list
      } else if (this.addcheckList.field === 'five_organ') {
        this.addOrgan.fiveOrganList = res.list
      } else {
        this.addOrgan.sixOrganList = res.list
      }
    },
    //获取机构下拉框数据
    getelseOrgan () {
      // let param = this.startcheckList
      // if (this.dialogTableVisible) {
      let param = this.addcheckList
      // }

      //  { comp_id: this.startrequestParam.comp_id, ...this.checkList }
      backEvaluateApi.getSelectList({
        params: param
      }).then((res) => {
        if (res.data) {
          this.getLevelData(res.data);//获取对应下的下拉数据
        }
      }).catch(err => {
        console.log(err);
      })
    },
    //获取一级机构下拉框数据
    getoneOrganList () {
      return backEvaluateApi.getSelectList({
        params: {
          comp_id: this.startrequestParam.comp_id,
          field: 'one_organ',
          p_field: '',
          p_field_value: ""
        }
      }).then((res) => {
        this.oneOrganList = res.data.list
      }).catch(err => {
        console.log(err);
      })
    },
    //获取岗位名称下拉框数据
    getjobNameList () {
      return backEvaluateApi.getSelectList({
        params: {
          comp_id: this.startrequestParam.comp_id,
          field: 'job_name',
          p_field: '',
          p_field_value: ""
        }
      }).then((res) => {
        this.jobNameList = res.data.list
      }).catch(err => {
        console.log(err);
      })
    },
    async init (chiDialog) {
      this.startrequestParam.comp_id = JSON.parse(window.localStorage.userInfo).comp_id// 公司id
      this.dialogTableVisible = chiDialog;
      if (chiDialog) {
        await this.getoneOrganList();//获取一级机构下拉框数据
        await this.getjobNameList();//岗位名称下拉数据
        await this.handleAddPageChange(1);
      }
    },
    handleSelectionChange (rows) {
      this.checkIds = []
      rows.forEach(item => {
        this.checkIds.push(item.person_id)
        //去重
        this.checkIds = Array.from(new Set(this.checkIds))
      });
    },
    cancelEvaluate () {//取消
      this.initResetCommonFunc();//初始化通知函数
    },
    initResetCommonFunc () {//初始化通知函数
      this.addRequestParam = this.$options.data().addRequestParam;//重置     
      this.addOrgan = this.$options.data().addOrgan;//重置
      this.$emit('update:childDialog', false);
    },
    saveAddEvaluate () {//确定
      let ids = this.checkIds.join(',');
      backEvaluateApi.saveAddpeople({
        data: {
          person_ids: ids,
          ...this.topStepParams
        }
      }).then((res) => {
        if (res.code === 0) {
          this.$emit('update:topStepParams', {});//重置
          this.$message.success('添加成功');
          this.initResetCommonFunc();//重置
        }
      }).catch(err => {
        console.log(err);
      })
    },
    //关闭弹窗
    closeAdd () {
      this.$refs.multipleTable.clearSelection();
      this.checkIds = [];
      this.initResetCommonFunc();//初始化通知函数
    },
    //查询-被评价人员
    addsearch () {
      this.addRequestParam.comp_id = this.startrequestParam.comp_id
      backEvaluateApi.getchoosePeopleList({
        params: this.addRequestParam
      }).then((res) => {
        if (res.code === 0) {
          this.addEvaluateList = res.data
          this.addEvaluateList.list.forEach((ele) => {   //checkoutTable是选中展示的table数据
            this.checkIds.forEach((item) => {
              if (ele.person_id == item) {
                this.$refs.multipleTable.toggleRowSelection(ele, true);
              }
            })
          })
        }
      }).catch(err => {
        console.log(err);
      })
    },
  },
  watch: {
    childDialog (n, o) {
      this.init(n);
    }
  },
  created () {
    this.init(this.childDialog);
  }
}
</script>

<style lang="scss" scoped>
.new-eva-personnel-next-container {
  .bottom-box {
    margin-top: 20px !important;
  }
}
</style>